<template>
  <div class="main package-container">
    <section>
      <el-form class="section-content" :rules="formRules" :model="formData" size="medium" ref="formData" label-width="150px">
        <el-form-item label="默认页面名称：" prop="title">
          <el-input v-model="formData.title" placeholder="默认页面名称" maxlength="120" clearable></el-input>
        </el-form-item>
        <el-form-item label="生效时间：" prop="tempDateTime">
          <el-date-picker
            @change="$forceUpdate()"
            v-model="formData.tempDateTime"
            type="datetimerange"
            placeholder="选择生效时间" 
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="默认地址：" prop="json">
          <el-input v-model="formData.json" placeholder="默认地址" clearable></el-input>
        </el-form-item>
        <el-form-item label="是否强制登录：">
          <el-switch
            v-model="formData.login"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否"
            :active-value="true"
            :inactive-value="false">
          </el-switch>
        </el-form-item>
        <el-form-item label="参考地址：">
          <el-table :data="relationList" header-row-class-name="table-header" border highlight-current-row @row-dblclick="handleDblclick">
            <el-table-column align="center" label="序号" type="index" width="60"></el-table-column>
            <el-table-column align="center" label="页面" prop="title" width="150"></el-table-column>
            <el-table-column align="center" label="地址" prop="json"></el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="success" :loading="btnLoading" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
export default {
  name: "defaultFixedEdit",
  props: {
    row: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      relationList: [],
      formRules: {
        title: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        tempDateTime: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        json: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
      btnLoading: false,
      formData: { // 默认页面数据
        title: '',
        tempDateTime: [],
        json: '',
        startTime: '',
        endTime: '',
        login: ''
      }
    }
  },
  created () {
    // if (this.$store.getters.cachedViews.length === 0) {
      this.getRelationList()
      if (this.isEdit) {
        this.formData = JSON.parse(this.row)
        this.$set(this.formData, 'tempDateTime', [this.formData.startTime, this.formData.endTime])
      }
    // }
  },
  activated () {
    this.getRelationList()
    if (this.isEdit) {
      this.formData = JSON.parse(this.row)
      this.$set(this.formData, 'tempDateTime', [this.formData.startTime, this.formData.endTime])
    }
  },
  computed: {
    isEdit() {
      return this.row && this.$route.name === 'defaultFixedEdit';
    }
  },
  methods: {
    handleDblclick (row) {
      this.formData.json = row.json
    },
    getRelationList () {
      this.request({
        url: '/manage-home-web/home/jump/preset',
        method: 'get'
      }).then((res) => {
        this.relationList = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    // 保存
    save() {
      this.$refs.formData.validate(valid => {
        if (!valid) {
          return false
        }
        this.request({
          url: '/manage-home-web/home/jump/edit',
          method: 'put',
          data: {
            ...this.formData,
            startTime: new Date(this.formData.tempDateTime[0]).getTime(),
            endTime: new Date(this.formData.tempDateTime[1]).getTime()
          }
        }).then(() => {
          this.$message.success('保存成功')
          this.$router.push({name: 'defaultFixed'})
          this.btnLoading = false
        }).catch(err => {
          console.log(err)
          this.btnLoading = false
        })
      })
    }
  }
}
</script>
